import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import Tabs, { TabPane } from '@kuiper-components/tabs';
import Label from '../../../../components/Label';
import Breadcrumb, { Item } from '../../../../components/Breadcrumb';
import s from './style.module.css';
import Info from './Info';
import TableBox from './Table';
import Loading from '@knownsec/react-component/dist/Loading';
import Message from '@knownsec/react-component/dist/Message';
import Button from '@knownsec/react-component/dist/Button';
import fetchFer from 'API/fetch';
import { withRouter } from 'react-router';
import Helper from '../../../../components/Helper';

function linkDetail({
	history,
	match: {
		params: { type, id },
	},
}) {
	const [loading, setLoading] = useState(true);
	const [info, setInfo] = useState({});
	const handleTypeChange = type => {
		history.push(`/job-manage/ipv6-monitor/linkDetail/${id}/${type}`);
	};
	const geData = async () => {
		setLoading(true);
		const res = await fetchFer(
			`/api/v2/repodatas/ipv6/support_check?task_session_id=${id}`,
			{
				method: 'GET',
				checkStatus: 501,
			}
		).catch(error => {
			console.log('[ error ]-222', error);
			return error;
		});
		setInfo(res);
		setLoading(false);
	};
	const [downloadTimer, setDownloadTimer] = useState(false)
	const downloadReport = () => {
		if (downloadTimer) return false;
		setDownloadTimer(true);
		const text = `[${info.results?.task?.name}]二三级链接明细.xlsx`;
		fetch(`/api/v2/report/download_ipv6?task_session_id=${id}`, {
			method: 'GET',
		}).then(res => {
			if (res.ok) {
				return res.blob();
			}
		})
		.then(blob => {
			const url = (window.webkitURL || window.URL).createObjectURL(blob);
			const a = document.createElement('a');
			a.href = url;
			a.download = text;
			a.click();
			setDownloadTimer(false);
		})
		.catch(() => {
			Message.show({
				type: 'error',
				message: `导出${text}`,
				placement: 'top',
				style: { width: '25rem' },
			});
			setDownloadTimer(false);
		});
	}
	useEffect(() => {
		geData();
	}, []);
	return (
		<div className={s.content}>
			<Breadcrumb className={s.bread}>
				<Item key="job-manage" disabled>
					任务管理
				</Item>
				<Item key="ipv6-monitor">IPv6合规检测</Item>
				<Item key={`detail/${id}`}>检测结果</Item>
				<Item>网站二三级链接IPv6 支持率详情</Item>
			</Breadcrumb>
			<Loading show={loading} label={''} />
			<div className={cn('scanv-page-container', s.linkDetail)}>
				<div className={s.head}>
					<p>任务名称：{info.results?.task?.name || '- -'}</p>
					<p>检测资产：{info.results?.task?.target || '- -'}</p>
				</div>
				<Label className={s.labelDetail}>概况</Label>
				<Info detail={info.results?.detail} />

				<Label className={cn(s.labelDetail, s.mtp36)}>
					链接详情
					<Helper
						placement="top"
						overlay={'网站二三级链接IPv6支持率单次最大检测URL数：5000条'}
					/>
				</Label>
				<div className='pr'>
					<Tabs className={s.tabs} activeKey={type} onChange={handleTypeChange}>
						<TabPane
							key="2"
							tab={`二级链接（${
								info.results?.detail?.secondary_urls_statistics?.urls_count || 0
							}）`}
						>
							{type === '2' && (
								<TableBox history={history} type={2} id={id} key={2} />
							)}
						</TabPane>
						<TabPane
							key="3"
							tab={`三级链接（${
								info.results?.detail?.tertiary_urls_statistics?.urls_count || 0
							}）`}
						>
							{type === '3' && (
								<TableBox history={history} type={3} id={id} key={3} />
							)}
						</TabPane>
					</Tabs>
					<Button className={cn('pa r0 df aic', s.downloadPlain)} style={{ top: '-5px' }} onClick={() => downloadReport()}>
						<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
								<g id="控件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
										<g id="Web安全任务详情表头" transform="translate(-1052.000000, -33.000000)" fill-rule="nonzero">
												<g id="编组-3" transform="translate(1032.000000, 25.000000)">
														<g id="下载" transform="translate(20.000000, 8.000000)">
																<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="20" height="20"></rect>
																<path d="M16.3636364,17.9545454 L3.63636363,17.9545454 C2.75772881,17.9545454 2.04545455,17.2422712 2.04545455,16.3636364 L2.04545455,14.5454546 C2.04545455,14.1688968 2.35071495,13.8636364 2.72727273,13.8636364 C3.10383052,13.8636364 3.40909092,14.1688968 3.40909092,14.5454546 L3.40909092,16.3636364 C3.40909093,16.4891556 3.51084438,16.5909091 3.63636363,16.5909091 L16.3636364,16.5909091 C16.4891556,16.5909091 16.5909091,16.4891556 16.5909091,16.3636364 L16.5909091,14.5454546 C16.5909091,14.1688968 16.8961695,13.8636364 17.2727273,13.8636364 C17.6492851,13.8636364 17.9545454,14.1688968 17.9545454,14.5454546 L17.9545454,16.3636364 C17.9545454,17.2422712 17.2422712,17.9545454 16.3636364,17.9545454 L16.3636364,17.9545454 Z M10,12.5090909 C9.81758439,12.5090909 9.64276921,12.4360263 9.51463893,12.3061877 C9.38650865,12.176349 9.31574961,12.0005812 9.31818182,11.8181818 L9.31818182,2.72727273 C9.31818182,2.35071495 9.62344222,2.04545455 10,2.04545455 C10.3765578,2.04545455 10.6818182,2.35071495 10.6818182,2.72727273 L10.6818182,11.8181818 C10.6842504,12.0005812 10.6134913,12.176349 10.4853611,12.3061877 C10.3572308,12.4360263 10.1824156,12.5090909 10,12.5090909 L10,12.5090909 Z M10,13.6772727 C9.81933074,13.6766185 9.64620538,13.6047552 9.51818182,13.4772727 L4.97272727,8.93181818 C4.84392179,8.80457551 4.77142679,8.63105676 4.77142679,8.45 C4.77142679,8.26894324 4.84392179,8.09542449 4.97272727,7.96818182 C5.23994534,7.70479205 5.66914556,7.70479205 5.93636363,7.96818182 L10.4818182,12.5136364 C10.6106237,12.640879 10.6831187,12.8143978 10.6831187,12.9954546 C10.6831187,13.1765113 10.6106237,13.3500301 10.4818182,13.4772727 C10.3537946,13.6047552 10.1806693,13.6766185 10,13.6772727 Z M10,13.6772727 C9.81933074,13.6766185 9.64620538,13.6047552 9.51818182,13.4772727 C9.38937634,13.3500301 9.31688134,13.1765113 9.31688134,12.9954546 C9.31688134,12.8143978 9.38937634,12.640879 9.51818182,12.5136364 L14.0636364,7.96818182 C14.3308544,7.70479205 14.7600547,7.70479205 15.0272727,7.96818182 C15.1560782,8.09542449 15.2285732,8.26894324 15.2285732,8.45 C15.2285732,8.63105676 15.1560782,8.80457551 15.0272727,8.93181818 L10.4818182,13.4772727 C10.3537946,13.6047552 10.1806693,13.6766185 10,13.6772727 L10,13.6772727 Z" id="形状" fill="#0B6FD6"></path>
														</g>
												</g>
										</g>
								</g>
						</svg>
						下载明细
					</Button>
				</div>
			</div>
		</div>
	);
}

linkDetail.propTypes = {
	match: PropTypes.shape({
		params: PropTypes.shape({
			type: PropTypes.string,
			id: PropTypes.string,
		}),
	}),
	history: PropTypes.any,
};
export default withRouter(linkDetail);
